import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { Icon } from '/@/components/Icon';
import { render } from '/@/utils/common/renderUtils';
import { duplicateCheck } from '/@/views/system/user/user.api';
import { bindMapFormSchema } from '/@/utils/common/compUtils';
import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
import { getDataSourceList, duplicateCodeCheck } from './graphreport.api';

export const columns = [
  {
    title: '图表名称',
    align: 'center',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '编码',
    align: 'center',
    dataIndex: 'code',
    width: 120,
  },
  {
    title: '数据',
    align: 'center',
    dataIndex: 'cgrSql',
    width: 360,
  },
  {
    title: 'Y轴文字',
    align: 'center',
    dataIndex: 'yaxisText',
    width: 120,
  },
  {
    title: 'X轴字段',
    align: 'center',
    dataIndex: 'xaxisField',
    width: 120,
  },
  {
    title: '分组文字',
    align: 'center',
    dataIndex: 'groupField',
    width: 120,
  },
];
export const searchFormSchema = [
  {
    label: '图表名称',
    field: 'name',
    component: 'JInput',
  },
  {
    label: '编码',
    field: 'code',
    component: 'JInput',
  },
];

const codePattern = /^[a-z|A-Z][a-z|A-Z|0-9|_|-]{0,}$/;

const mapFormSchema = bindMapFormSchema(
  {
    col_span_one: {
      colProps: {
        xs: 24,
        sm: 8,
      },
      itemProps: {
        labelCol: { xs: 24, sm: 6 },
        wrapperCol: { xs: 24, sm: 18 },
        colon: true,
      },
      style: { width: '100%' },
    },
    col_span_two: {
      colProps: {
        xs: 24,
        sm: 16,
      },
      itemProps: {
        labelCol: { xs: 24, sm: 3 },
        wrapperCol: { xs: 24, sm: 21 },
        colon: true,
      },
      style: { width: '100%' },
    },
    col_span_three: {
      colProps: {
        xs: 24,
        sm: 24,
      },
      itemProps: {
        labelCol: { xs: 24, sm: 2 },
        wrapperCol: { xs: 24, sm: 22 },
        colon: true,
      },
      style: { width: '100%' },
    },
    col_span_three_label_empty: {
      label: ' ',
      colProps: {
        xs: 24,
        sm: 24,
      },
      itemProps: {
        labelCol: { xs: 24, sm: 2 },
        wrapperCol: { xs: 24, sm: 22 },
        colon: false,
      },
      style: { width: '100%' },
    },
  },
  'col_span_one'
);

export const formSchema: FormSchema[] = [
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
  mapFormSchema(
    {
      label: '图表编码',
      field: 'code',
      component: 'Input',
      dynamicRules: ({ values, model }) => {
        return [
          {
            required: true,
            validator: (_, value) => {
              return new Promise((resolve, reject) => {
                if (!value) {
                  return reject('请输入图表编码！');
                }
                if (!codePattern.test(value)) {
                  return reject('编码必须以字母开头，可包含数字、下划线、横杠！');
                }
                // const params = {
                //   tableName: 'onl_cgreport_head',
                //   fieldName: 'code',
                //   fieldVal: value,
                //   dataId: model.id,
                // };
                // duplicateCheck(params)
                //   .then((res) => {
                //     res.success ? resolve() : reject('报表编码已存在!');
                //   })
                //   .catch((err) => {
                //     reject(err.message || '校验失败');
                //   });
                // const code = model.code;
                // duplicateCodeCheck(code)
                //   .then((res) => {
                //     console.log('wang-codecheck', res);
                //     res.success ? resolve() : reject('图表编码已存在!');
                //   })
                //   .catch((err) => {
                //     reject(err.message || '校验失败');
                //   });

                resolve();
              });
            },
          },
        ];
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '图表名字',
      field: 'name',
      component: 'Input',
      dynamicRules: () => {
        return [{ required: true, message: '请输入报表名字!' }];
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '展示模板',
      field: 'displayTemplate',
      defaultValue: 'tab',
      component: 'JDictSelectTag',
      componentProps: {
        dictCode: 'online_graph_display_template',
        placeholder: '请选择展示模板',
        stringToNumber: false,
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: 'X轴字段',
      field: 'xaxisField',
      component: 'Input',
      dynamicRules: () => {
        return [{ required: true, message: '请输入X轴字段!' }];
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: 'Y轴字段',
      field: 'yaxisField',
      component: 'Input',
      dynamicRules: () => {
        return [{ required: true, message: '请输入Y轴字段!' }];
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '分组字段',
      field: 'groupField',
      component: 'Input',
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '数据类型',
      field: 'dataType',
      defaultValue: 'sql',
      component: 'JDictSelectTag',
      // componentProps: {
      //   dictCode: 'online_graph_data_type',
      //   placeholder: '请选择数据类型',
      //   stringToNumber: false,
      // },
      componentProps: ({ formActionType, schema, formModel }) => {
        return {
          dictCode: 'online_graph_data_type',
          placeholder: '请选择数据类型',
          stringToNumber: false,
          // onChange: (value) => {
          //   const { updateSchema } = formActionType;
          //   let cgrsqlLabel = '查询SQL';
          //   if (formModel.dataType == 'json') {
          //     cgrsqlLabel = '数据JSON';
          //   } else if (formModel.dataType == 'api') {
          //     cgrsqlLabel = 'API接口';
          //   } else if (formModel.dataType == 'sql') {
          //     cgrsqlLabel = '查询SQL';
          //   }
          //   updateSchema([
          //     {
          //       field: 'cgrSql',
          //       label: cgrsqlLabel,
          //     },
          //   ]);
          // },
        };
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '数据源',
      field: 'dbSource',
      component: 'ApiSelect',
      componentProps: {
        api: getDataSourceList,
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '图表类型',
      field: 'graphType',
      defaultValue: 'bar',
      component: 'JSelectMultiple',
      componentProps: {
        dictCode: 'online_graph_type',
        placeholder: '请选择图表类型',
        //mode: 'multiple',
      },
    },
    'col_span_one'
  ),
  mapFormSchema(
    {
      label: '描述',
      field: 'content',
      component: 'Input',
    },
    'col_span_three'
  ),
  mapFormSchema(
    {
      label: '查询SQL',
      field: 'cgrSql',
      component: 'JCodeEditor',
      rules: [{ required: true, message: '请填写查询SQL' }],
      componentProps: {
        height: '150px',
        fullScreen: true,
      },
      ifShow: ({ values }) => {
        return values.dataType == 'sql';
      },
    },
    'col_span_three'
  ),
  mapFormSchema(
    {
      label: '数据JSON',
      field: 'cgrSql',
      component: 'JCodeEditor',
      rules: [{ required: true, message: '请填写JSON数据' }],
      componentProps: {
        height: '150px',
        fullScreen: true,
      },
      ifShow: ({ values }) => {
        return values.dataType == 'json';
      },
    },
    'col_span_three'
  ),
  mapFormSchema(
    {
      label: 'API接口',
      field: 'cgrSql',
      component: 'JCodeEditor',
      rules: [{ required: true, message: '请填写查询API接口' }],
      componentProps: {
        height: '150px',
        fullScreen: true,
      },
      ifShow: ({ values }) => {
        return values.dataType == 'api';
      },
    },
    'col_span_three'
  ),
  mapFormSchema(
    {
      label: ' ',
      field: 'analyseButton',
      component: 'Input',
      slot: 'analyseButton',
      style: 'flex: 1 1 0%; width: 100%;',
      // ifShow: ({ values }) => {
      //   return values.dataType == 'sql';
      // },
    },
    'col_span_three_label_empty'
  ),
  mapFormSchema(
    {
      label: 'JS增强',
      field: 'extendJs',
      component: 'JCodeEditor',
      componentProps: {
        height: '150px',
        fullScreen: true,
      },
    },
    'col_span_three'
  ),
];

export const graphreportParamColumns: JVxeColumn[] = [
  {
    title: '参数字段',
    key: 'paramName',
    type: JVxeTypes.input,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: true, message: '${title}不能为空' }],
  },
  {
    title: '参数文本',
    key: 'paramTxt',
    type: JVxeTypes.input,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: true, message: '${title}不能为空' }],
  },
  {
    title: '参数默认值',
    key: 'paramValue',
    type: JVxeTypes.input,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
];

export const graphreportItemColumns: JVxeColumn[] = [
  {
    title: '字段名字',
    key: 'fieldName',
    type: JVxeTypes.input,
    minWidth: '150px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: true, message: '${title}不能为空' }],
  },
  {
    title: '字段文本',
    key: 'fieldTxt',
    type: JVxeTypes.input,
    minWidth: '150px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: true, message: '${title}不能为空' }],
  },
  {
    title: '字段类型',
    key: 'fieldType',
    minWidth: '150px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: true, message: '${title}不能为空' }],
    type: JVxeTypes.select,
    options: [
      { title: '数值类型', value: 'Integer' },
      { title: '字符类型', value: 'String' },
      { title: '日期类型', value: 'Date' },
      { title: '时间类型', value: 'Datetime' },
      { title: '长整型', value: 'Long' },
    ],
  },
  {
    title: '计算总计',
    key: 'isTotal',
    minWidth: '80px',
    align: 'center',
    type: JVxeTypes.checkbox,
    customValue: [1, 0],
    defaultChecked: true,
  },
  {
    title: '是否查询',
    key: 'isSearch',
    minWidth: '80px',
    align: 'center',
    type: JVxeTypes.checkbox,
    customValue: [1, 0],
    defaultChecked: true,
  },
  {
    title: '查询模式',
    key: 'searchMode',
    type: JVxeTypes.select,
    minWidth: '150px',
    placeholder: '请选择${title}',
    options: [
      { title: '单条件查询', value: 'single' },
      { title: '范围查询', value: 'group' },
    ],
  },
  {
    title: '字典code',
    key: 'dictCode',
    type: JVxeTypes.input,
    minWidth: '150px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  {
    title: '是否显示',
    key: 'isShow',
    minWidth: '80px',
    align: 'center',
    type: JVxeTypes.checkbox,
    customValue: [1, 0],
    defaultChecked: true,
  },
];
